<template>
<div>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="no" label="商品" width="300" fixed="left">
      <template v-slot="scope">
        <div style="display:flex;align-items: center;">
          <el-avatar shape="square" :size="50" :src="scope.row.OrderItems[0]?.goods_item ? scope.row.OrderItems[0].goods_item.cover : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' " style="margin-right: 6px"/>
          <p>{{ scope.row.OrderItems[0]?.goods_item ? scope.row.OrderItems[0].goods_item.title : '商品已被删除' }}</p>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="create_time" width="300" label="下单时间" align="center">
    </el-table-column>
    <el-table-column prop="total_price" label="实付款" align="center">
    </el-table-column>
    <el-table-column prop="payment_method" label="付款状态" width="120" align="center">
    </el-table-column>
    <el-table-column prop="no" label="订单号" width="200" align="center">
    </el-table-column>
    <el-table-column label="操作" width="180" align="center" fixed="right">
      <template v-slot="scope">
        <el-button style="color: #409EFF;font-size: 12px;" @click="setDrawerData(scope.row)" link>订单详情{{ scope.no }}</el-button>
        <el-button v-if="show" style="color: #409EFF;font-size: 12px;" link @click="cancel">{{ buttonText }}</el-button>
        <el-button v-else style="color: #409EFF;font-size: 12px;" link @click="delorder(scope.row?.id)" >取消订单</el-button>
      </template>
    </el-table-column>
  </el-table>

  <GoodsDrawer :drawer="drawer" :drawerData="drawerData" @child-event="handleChildEvent"></GoodsDrawer>

</div>
</template>
<script>
import { getOrder, Cancelanorder } from '@/api/goods'
import GoodsDrawer from '../components/GoodsDrawer'
export default {
  data () {
    return {
      show: true,
      drawer: false,
      drawerData: null,
      tableData: [],
      buttonText: '立即支付'
    }
  },
  components: {
    GoodsDrawer
  },
  methods: {
    setDrawerData (row) {
      this.drawer = true
      this.drawerData = row
    },
    handleChildEvent () {
      this.drawer = false
    },
    cancel () {
      this.show = false
      this.$message({
        type: 'success',
        message: '支付成功'
      })
    },
    async order () {
      try {
        const orders = await getOrder()
        this.tableData = orders.data.data.list
      } catch (error) {
      }
    },
    async cancelorder (id) {
      try {
        await Cancelanorder({
          ids: id
        })
      } catch (error) {
      }
    },
    delorder (id) {
      this.cancelorder(id)
      this.order()
    }
  },
  created () {
    this.order()
  }
}
</script>
<style scoped>

</style>
